<template>
	<view>
		<view class="serviceLifeHead">
			<swiper class="swiper" :indicator-dots="false" autoplay interval="2000" duration="1000" circular indicator-active-color="#E25A29">
				<swiper-item v-if="!swiperList.length" class="swiperItem">
					<image src="/static/images/banner9.png"></image>
				</swiper-item>
				<swiper-item v-else @click="goToGood(item.url)" v-for="(item, index) in swiperList" :key="index" class="swiperItem">
					<image :src="item.pic" />
				</swiper-item>
			</swiper>
		</view>
		<!-- <view class="serviceClass">
			<view v-for="(item,index) in list" :key="index" class="">
				{{ item.text }}
			</view>
		</view> -->
		<view class="faddishShop"><image src="/static/images/will-buy.png"></image></view>
		
		<view class="faddishBody">
			<view class="faddishList">
				<view @click="goGoodDetail(item.product_id)" v-for="(item, index) in bestList" :key="index" class="faddishItem">
					<view class="itemTop"><image :src="item.image"></image></view>
		
					<view class="itemDtail">
						<view class="itemTitle">{{ item.store_name }}</view>
						<view class="itemOriginal">
							<text>原价 :</text>
							<text>￥{{ item.ot_price }}</text>
						</view>
						<view class="itemBtm">
							<view class="itemPrice">
								<text>¥{{ item.price - item.integral }}</text>
								<text v-if="item.integral" style="color: #fa4e44;">+{{ item.integral }}</text>
								<text v-if="item.integral" style="font-size: 24rpx;color: #fa4e44;">(车币)</text>
							</view>
							<view class="itemShop iconfont icon-gouwuche1"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="over_line" v-if="isover">----- 我也是有底线的 ------</view>
			<view v-if="!bestList.length" class="notAvailable">暂无爆款~</view>
		</view>
		
		<!-- <view class="faddishBody">
			<view class="faddishHead">
				<view class="todayFaddish">
					<image src="/static/images/boutique.png"></image>
					<text>精品推荐</text>
					<text>全额兑换 免费领取</text>
				</view>
				<view @click="goToHotpage('/pages/faddish/faddish')" class="moreDaddish">
					<text style="color: #8F8F8F;">更多</text>
					<image src="/static/images/rightclick.png"></image>
				</view>
			</view> 
			<view class="faddishList">
				<scroll-view @scrolltolower="uploadMissioc" scroll-x="true" class="scroll">
					<view @click="goGoodDetail(item.product_id)" v-for="(item, index) in handpick" :key="index" class="faddishItem">
						<view class="itemTop"><image :src="item.image"></image></view>
			
						<view class="itemDtail">
							<view class="itemTitle">{{ item.store_name }}</view>
							<view class="itemOriginal">
								<text>原价 :</text>
								<text>￥{{ item.ot_price }}</text>
							</view>
							<view class="itemBtm">
								<view class="itemPrice">¥{{ item.price }}</view>
								<view class="itemShop iconfont icon-gouwuche1"></view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						text:'时尚配饰'
					},
					{
						text:'精品童装'
					},
					{
						text:'女装精选'
					},
					{
						text:'时尚鞋包'
					},
					{
						text:'母婴用品'
					}
				],
				handpick:[],
				swiperList:[],
				bestList: [],
				pagenum: 1, // 页码值
				pagesize: 20, // 每页显示多少条数据
				total: '',
				isover: false, // 判断是否到底部，给用户提示
				isloading: false, // 判断数据是否在加载中
				newPagenum: 1, // 页码值
				newPagesize: 5, // 每页显示多少条数据
				newTotal: '',
				newIsover: false, // 判断是否到底部，给用户提示
				newIsloading: false // 判断数据是否在加载中
			};
		},
		onLoad() {
			this.getBanner();
			// this.getProductHot();
			this.getProductBest();
		},
		methods:{
			// 获取爆款
			getProductBest() {
				// 正在加载下页数据
				this.isloading = true;
				this.$api.getProductBest(
					{
						page: this.pagenum,
						limit: this.pagesize
					},
					res => {
						this.total = res.data.count;
						this.bestList = [...this.bestList, ...res.data.list];
						this.bestList.forEach(item => {
							item.integral = parseFloat(item.integral)
						})
						// 没有在加载下页数据
						this.isloading = false;
					}
				);
			},
			// 获取banner
			getBanner() {
				this.$api.getBanner({
					label:'life'
				},res => {
					this.swiperList = res.data
				})
			},
			// 点击banner
			goToGood(url) {
				uni.navigateTo({
				    url
				});
			},
			// 去商品列表
			goGoodDetail(id) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${id}`
				});
			},
			// 获取精选推荐
			getProductHot() {
				// 正在加载下页数据
				this.isloading = true;
				this.$api.getProductHot(
					{
						page: this.pagenum,
						limit: this.pagesize
					},
					res => {
						this.total = res.data.count;
						this.handpick = [...this.handpick, ...res.data.list];
						// 没有在加载下页数据
						this.isloading = false;
					}
				);
			},
			uploadMissioc() {
				if (!this.handpick.length) {
					return;
				}
				// 判断当前是否正在请求数据中
				if (this.isloading) {
					return;
				}
				if (this.pagesize * this.pagenum >= this.total) {
					this.isover = true;
					return;
				}
				this.pagenum++;
				this.getProductHot();
			}
		},
		onReachBottom() {
			if (!this.bestList.length) {
				return;
			}
			// 判断当前是否正在请求数据中
			if (this.isloading) {
				return;
			}
			if (this.pagesize * this.pagenum >= this.total) {
				this.isover = true;
				return;
			}
			this.pagenum++;
			this.getProductBest();
		}
	}
</script>

<style lang="less">
.serviceLifeHead {
	height: 400rpx;
	margin-bottom: 20rpx;
	.swiper {
		height: 100%;
		.swiperItem {
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 100%;
				}
			}
	}
}

.faddishShop {
	height: 85rpx;
	margin: 20rpx 0;
	image {
		width: 100%;
		height: 100%;
	}
}

.serviceClass {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80rpx;
	background: #FFFFFF;
	padding: 0 20rpx;
	margin: 20rpx 0;
	view {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
}

// .faddishBody {
// 	padding: 0 20rpx;
// 	margin-top: 20rpx;
// 	overflow: hidden;
// 	background-color: #ffffff;
// 	.faddishHead {
// 			display: flex;
// 			justify-content: space-between;
// 			align-items: center;
// 			padding: 20rpx 0;
// 			margin: 20rpx 0;
// 			.todayFaddish {
// 				image {
// 					width: 31rpx;
// 					height: 31rpx;
// 					vertical-align: middle;
// 					margin-right: 10rpx;
// 				}
// 				text {
// 					vertical-align: middle;
// 					margin-right: 10rpx;
// 				}
// 				text:nth-child(1) {
// 					margin-right: 20rpx;
// 					font-size: 35rpx;
// 					font-weight: 700;
// 				}
// 				text:nth-child(2) {
// 					font-size: 20rpx;
// 					color: #B6A3A1;
// 				}
// 			}
// 			.moreDaddish {
// 				font-size: 26rpx;
// 				text {
// 					vertical-align: middle;
// 					margin-right: 10rpx;
// 				}
// 				image {
// 					width: 15rpx;
// 					height: 25rpx;
// 					vertical-align: middle;
// 					margin-top: 5rpx;
// 				}
// 			}
// 		}
// 	.faddishList {
// 		display: flex;
// 		justify-content: space-between;
// 		flex-wrap: wrap;
// 		.scroll {
// 			overflow: hidden;
// 			white-space: nowrap;
// 			.faddishItem:last-child {
// 				margin-right: 0;
// 			}
// 			.faddishItem {
// 				display: inline-block;
// 				border-radius: 20px;
// 				margin-bottom: 20rpx;
// 				margin-right: 50rpx;
// 				.itemTop {
// 					width: 200rpx;
// 					height: 200rpx;
// 					border-radius: 20rpx;
// 					margin-bottom: 10rpx;
// 					image {
// 						width: 100%;
// 						height: 100%;
// 						border-radius: 20rpx;
// 					}
// 				}
// 				.itemDtail {
// 					width: 200rpx;
// 					.itemTitle {
// 						overflow: hidden;
// 						text-overflow: ellipsis;
// 						white-space: nowrap;
// 						font-size: 32rpx;
// 						color: #232323;
// 					}
// 					.itemOriginal {
// 						margin: 10rpx 0;
// 						font-size: 24rpx;
// 						color: #9a9a9a;
// 						text:nth-child(2) {
// 							text-decoration: line-through;
// 							margin-left: 15rpx;
// 						}
// 					}
// 					.itemBtm {
// 						display: flex;
// 						justify-content: space-between;
// 						align-items: center;
// 						color: #fa4e44;
// 						.itemShop {
// 							width: 43rpx;
// 							height: 43rpx;
// 							image {
// 								width: 100%;
// 								height: 100%;
// 							}
// 						}
// 					}
// 				}
// 			}
// 		}
// 	}
// }

.faddishBody {
	padding: 0 20rpx;
	.faddishList {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.faddishItem {
			width: 346rpx;
			height: 548rpx;
			background: #ffffff;
			border-radius: 20px;
			margin-bottom: 20rpx;
			.itemTop {
				width: 100%;
				height: 346rpx;
				border-radius: 20rpx 20rpx 0px 0px;
				image {
					width: 100%;
					height: 346rpx;
					border-radius: 20rpx 20rpx 0px 0px;
				}
			}
			.itemDtail {
				padding: 25rpx 20rpx 0;
				.itemTitle {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 32rpx;
					color: #232323;
				}
				.itemOriginal {
					margin: 15rpx 0;
					font-size: 24rpx;
					color: #9a9a9a;
					text:nth-child(2) {
						text-decoration: line-through;
						margin-left: 15rpx;
					}
				}
				.itemBtm {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #000000;
					.itemShop {
						width: 43rpx;
						height: 43rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
	.notAvailable {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 200rpx;
		font-size: 24rpx;
		color: #666;
	}
	.over_line {
		text-align: center;
		background-color: #f5f5f5;
		font-size: 26rpx;
		color: #999;
		padding: 20rpx 0;
	}
}



</style>
